<template>
  <div class="q-pa-md" style="max-width: 300px">
    <div class="q-gutter-md">
      <t-select v-model="model" :options="options" label="Standard" />

      <t-select filled v-model="model" :options="options" label="Filled" />

      <t-select outlined v-model="model" :options="options" label="Outlined" />

      <t-select standout v-model="model" :options="options" label="Standout" />

      <t-select
        standout="bg-teal text-white"
        v-model="model"
        :options="options"
        label="Custom standout"
      />

      <t-select
        borderless
        v-model="model"
        :options="options"
        label="Borderless"
      />

      <t-select
        rounded
        filled
        v-model="model"
        :options="options"
        label="Rounded filled"
      />

      <t-select
        rounded
        outlined
        v-model="model"
        :options="options"
        label="Rounded outlined"
      />

      <t-select
        rounded
        standout
        v-model="model"
        :options="options"
        label="Rounded standout"
      />

      <t-select
        square
        filled
        v-model="model"
        :options="options"
        label="Square filled"
      />

      <t-select
        square
        outlined
        v-model="model"
        :options="options"
        label="Square outlined"
      />

      <t-select
        square
        standout
        v-model="model"
        :options="options"
        label="Square standout"
      />
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        model: ref(null),
        options: ['Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'],
      };
    },
  };
</script>
